<script lang="ts" setup>
import { watch } from 'vue';
import { useEcharts } from '@/hooks/common/echarts';
import { useAppStore } from '@/store/modules/app';
import { countLoginStatus } from '@/service/api/log/loginLog';
const appStore = useAppStore();
defineOptions({
  name: 'PieChart'
});
const { domRef, updateOptions } = useEcharts(() => ({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '0%',
    right: '5%',
    itemStyle: {
      borderWidth: 0
    }
  },
  grid: {
    left: '5%',
    right: '5%',
    bottom: '10%',
    containLabel: true // 包含标签
  },
  series: [
    {
      color: ['#227eff', '#f62d38'],
      type: 'pie',
      radius: ['40%', '70%']
      // avoidLabelOverlap: false,
      // itemStyle: {
      //   borderRadius: 10,
      //   borderColor: '#fff',
      //   borderWidth: 2
      // },
      // label: {
      //   show: false,
      //   position: 'center'
      // },
      // emphasis: {
      //   label: {
      //     show: true,
      //     fontSize: 20,
      //     fontWeight: 'bold'
      //   }
      // }
      // labelLine: {
      //   show: false
      // }
    }
  ]
}));
function updateLocale() {}
async function getLoginLogsStats() {
  const data = await countLoginStatus().then((res: any) => {
    return Promise.resolve(res?.data.data);
  });
  updateOptions(opts => {
    opts.series[0].data = [
      {
        value: data.success,
        name: '登录成功'
      },
      {
        value: data?.error,
        name: '登录失败'
      }
    ];
    return opts;
  });
}
async function init() {
  getLoginLogsStats();
}

watch(
  () => appStore.locale,
  () => {
    updateLocale();
  }
);

init();
</script>

<template>
  <NCard title="登录统计" :bordered="false" class="card-wrapper" content-class="p-0" content-style="padding:0px">
    <div ref="domRef" class="h-250px overflow-hidden"></div>
  </NCard>
</template>

<style lang="scss" scoped></style>
